<template>
	<view class="my-container">
		<view class="top-title">
			<text class="top-tip">注册</text>
			<image src="/static/register/kefu-withe.png" mode="" class="kf-logo"></image>
		</view>
		<view class="register-form">
			<view style="text-align: center;">
				<image src="/static/common/logo-zn-big.png" mode="" class="top-logo"></image>
			</view>
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<view class="title"><text class="uni-form-item__title">用户名</text></view>
					<view class="uni-input-wrapper">
						<input v-model="form.username" name='username' class="uni-input" type="number" focus placeholder="请输入手机号" />
					</view>
					<text class="error-tip" v-if="showName">用户名不能为空</text>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title"><text class="uni-form-item__title">登录密码</text></view>
					<view class="uni-input-wrapper">
						<input v-model="form.password" name='password' class="uni-input" type="password" focus placeholder="请输入登录密码" />
					</view>
					<text class="error-tip" v-if="showPwd">密码不能为空</text>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title"><text class="uni-form-item__title">确认密码</text></view>
					<view class="uni-input-wrapper">
						<input v-model="form.confirmPwd" name='confirmPwd' class="uni-input" type="password" focus placeholder="请再次输入登录密码" />
					</view>
					<text class="error-tip" v-if="showConfirm">两次密码不相同</text>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title"><text class="uni-form-item__title">推广码</text></view>
					<view class="uni-input-wrapper">
						<input name='tgm' class="uni-input" type="text" focus placeholder="请输入推广码" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title"><text class="uni-form-item__title">验证码</text></view>
					<view class="uni-input-wrapper">
						<input v-model="form.yzm" name='yzm' class="uni-input" type="text" focus placeholder="请输入验证码" />
						<text v-if="showGetYzm" class="my-yzm" @tap="getYzm">获取验证码</text>
						<text v-else class="my-yzm">{{time}}<text style="color: #000000;">后获取</text></text>
					</view>
					<text class="error-tip" v-if="showYzm">验证码不能为空</text>
				</view>
				<view class="uni-btn-v">
					<button form-type="submit" class="my-btn" :class="{'my-btn-disabled':disabled}" :disabled="disabled">注册</button>
				</view>
			</form>
			<view class="go-another" @tap="goLogin">
				<text >已有账号？</text>
				<text style="color: #F59328;">登录</text>
			</view>
			<view class="xieyi">注册即代表同意蚂蚁外快《用户协议》</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					confirmPwd: '',
					yzm: ''
				},
				showGetYzm: true,
				time: 10,
				timer: null

			};
		},
		computed: {
			disabled() {
				if ((this.form.username !== '') && (this.form.password !== '') && (this.form.confirmPwd === this.form.password) &&
					this.form.yzm !== '') {
					return false
				} else {
					return true
				}
			},
			showName() {
				if (this.form.username === '') {
					return true
				} else {
					return false
				}
			},
			showPwd() {
				if (this.form.password === '') {
					return true
				} else {
					return false
				}
			},
			showConfirm() {
				if (this.form.confirmPwd !== this.form.password) {
					return true
				} else {
					return false
				}
			},
			showYzm() {
				if (this.form.yzm === '') {
					return true
				} else {
					return false
				}
			},

		},
		methods: {
			formSubmit(e) {
				var formdata = e.detail.value
				if (this.showConfirm && this.showName && this.showPwd && this.showYzm) {
					uni.showToast({
						title: '请填写完整',
						duration: 1000,
						mask: true
					});
				} else {

					return false
				}
			},
			// 获取验证码
			getYzm() {
				this.time = 60
				this.showGetYzm = false
				let _this = this
				this.timer = setInterval(function() {
					if (_this.time < 1) {
						_this.showGetYzm = true
						clearInterval(_this.timer)
					} else {
						_this.time--
					}
				}, 1000)
			},
			goLogin(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-container {
		background: #F59328;
	}

	.top-title {
		display: flex;
		justify-content: space-around;
		padding-top: 40rpx;
		margin-bottom: 40rpx;

		.top-tip {
			font-size: 48rpx;
			height: 70rpx;
			line-height: 70rpx;
			color: #FFFFFF;
			border-bottom: 2px solid #FFFFFF;
		}

		.kf-logo {
			width: 86rpx;
			height: 76rpx;
		}
	}

	.register-form {
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		background-color: #FFFFFF;
		padding-top: 40rpx;
		.top-logo{
			height: 120rpx;
		}
	}
	.go-another{
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}
	.xieyi{
		margin-top: 60rpx;
		font-szie:28rpx;
		text-align: center;
	}
	.uni-input-wrapper {
		display: flex;
		padding: 8px 13px;
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #FFFFFF;
		box-sizing: border-box;
	}
	.uni-form-item__title {
		font-size: 32rpx;
		color: #333333;
	}
	.my-yzm {
		color: #FC7533;
		cursor: pointer;
	}

	.uni-input {
		height: 28px;
		line-height: 28px;
		font-size: 15px;
		padding: 0px;
		flex: 1;
		background-color: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;
	}

	.uni-icon {
		font-family: uniicons;
		font-size: 24px;
		font-weight: normal;
		font-style: normal;
		width: 24px;
		height: 24px;
		line-height: 24px;
		color: #999999;
	}
</style>
